<html>
  <head>
    <title></title>
    <style>
    
      desktop { 
        aspect: ScreenMap;
        display:block;
        size:*;
        border:1px solid red;
        /*image-rendering:optimize-quality;*/
      }

      .desktop-text { 
        font-size:200px;
        color:#000;
      }
    
    </style>
    <script>
    
    function ScreenMap() {

      var me = this;

      var nmons = Window.screens;

      // desktop overall size - includes projection of all monitors(screens)
      var minx = 0;
      var miny = 0;
      var maxx = 0;
      var maxy = 0;
      
      var snapshots = [];
      
      document.timer(1s, () => { 
        snapshots = [];          
        for(let m = 0; m < nmons; ++m )
          snapshots.push( Window.screenBox(m,"snapshot"));
        document.requestPaint();
        return true; // keep timer ticking
      });
      
      const getMonitors = () => {
        var monitors = [];
        
        for(var m = 0; m < nmons; ++m ) {
          let [x,y,w,h] = Window.screenBox(m,"frame","xywh",false);
          minx = Math.min(minx,x);
          miny = Math.min(miny,y);
          maxx = Math.max(maxx,x + w - 1);
          maxy = Math.max(maxy,y + h - 1);
          let [ax,ay,aw,ah] = Window.screenBox(m,"workarea","xywh",false);
          
          var mdef = { 
            x, y, w, h,
            ax, ay, aw, ah,
            primary: Window.screenBox(m,"isPrimary"),
            caption: new Graphics.Text( (m + 1).toString(), "desktop-text"),
          };
          monitors.push(mdef);
        }
        return monitors;
      } 

      this.paintContent = gfx => {
      
        var monitors = getMonitors();
        var [wx,wy,ww,wh] = Window.this.box( "xywh", "border","screen",false);
      
        var [w,h] = this.state.box("dimension");
        var ratio = w / (maxx - minx);
        //
        gfx.scale(ratio,ratio);
        gfx.translate(-minx,-miny);

        for(var m = 0; m < nmons; ++m ) {
          var mdef = monitors[m];
          gfx.strokeWidth = 1px;
          gfx.strokeStyle = Color.RGB(0,0,0);
          gfx.strokeRect( mdef.x, mdef.y, mdef.w, mdef.h );

          gfx.fillStyle = mdef.primary ? Color.RGB(248,0,0,128) : Color.RGB(0,0,248,128);
          gfx.fillRect( mdef.ax, mdef.ay, mdef.aw, mdef.ah );
          if(snapshots.length && snapshots[m])
            gfx.draw( snapshots[m], { 
              x:mdef.x,
              y:mdef.y,
              width:mdef.w,
              height:mdef.h});

          gfx.draw( mdef.caption, { 
            x: mdef.x + mdef.w / 2, 
            y: mdef.y + mdef.h / 2, 
            alignment: 5 });
          
          // draw this window projection on the desktop 
          gfx.fillStyle = Color.RGB(248,232,0,100);
          gfx.fillRect( wx, wy, ww, wh );

        }
      }
      
      Window.this.on("move", () => { this.requestPaint(); });
      
    }
        
    </script>
  </head>
<body>

  Layout of your screen(s) and projection of the window on it:

  <desktop />

</body>
</html>
